<template>
  <view class="main">
    <view class="commonBox">
      <view class="title">请上传身份证的正反面</view>
      <view class="scBox">
        <view class="left">
          <view class="s">头像面</view>
          <view class="x">上传身份证正面</view>
        </view>
        <image class="img" v-if="formData.cardFrontPic" @click="getCardFrontPic('q')" :src="formData.cardFrontPic" mode="scaleToFill" />
        <image class="img" v-else @click="getCardFrontPic('q')" src="../../static/my/txm.png" mode="scaleToFill" />
      </view>
      <view class="scBox">
        <view class="left">
          <view class="s">国徽面</view>
          <view class="x">上传名片正面</view>
        </view>
        <image class="img" v-if="formData.cardReversePic" @click="getCardFrontPic('h')" :src="formData.cardReversePic" mode="scaleToFill" />
        <image class="img" v-else @click="getCardFrontPic('h')" src="../../static/my/ghm.png" mode="scaleToFill" />
      </view>
      <view class="bz">
        <view>审核须知</view>
        为满足相关法律法规政策及相关主管部门的要求，您应提供真实身份信息进行名片认证，我司承诺将根据《隐私政策》的约定保护您提供的身份信息，请确保证件清晰完整，属于本人。
      </view>
    </view>
    <view class="buttomBox">
      <u-button color="#1676fd" :disabled="disabled" :text="statusTetx" shape="circle" @click="submit"></u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { applyStatus, authRecord } from "@/api/my";
import { BASE_UPLOADURL } from "@/utils/request";
import { onMounted, ref } from "vue";
//@ts-ignore
import { onShow } from "@dcloudio/uni-app";
const formData = ref({
  cardFrontPic: "",
  cardReversePic: "",
});
const statusTetx = ref();
const disabled = ref(false);
onShow(async () => {
  getStatus();
});
const getStatus = async () => {
  const res = await applyStatus();
  if (res.data.cardFrontPic || res.data.cardReversePic) {
    formData.value.cardFrontPic = res.data.cardFrontPic;
    formData.value.cardReversePic = res.data.cardReversePic;
  }
  if (res.data.status === "0") {
    statusTetx.value = "立即提交";
    disabled.value = false;
  } else if (res.data.status === "1") {
    statusTetx.value = "申请中";
    disabled.value = true;
  } else if (res.data.status === "2") {
    statusTetx.value = "已认证";
    disabled.value = true;
  }
};
const currentClick = ref();
const getCardFrontPic = async (text: string) => {
  if (disabled.value) {
    return;
  }
  currentClick.value = text;
  uploadImg();
};
const uploadImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFilePaths;
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i],
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            if (currentClick.value === "q") {
              formData.value.cardFrontPic = JSON.parse(uploadFileRes.data).data;
            } else {
              formData.value.cardReversePic = JSON.parse(uploadFileRes.data).data;
            }
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
        });
      }
    },
  });
};
const submit = async () => {
  console.log(formData.value);
  if (!formData.value.cardFrontPic) {
    return uni.showToast({
      title: "请上传身份证的正面",
      icon: "none",
    });
  }
  if (!formData.value.cardReversePic) {
    return uni.showToast({
      title: "请上传身份证的反面",
      icon: "none",
    });
  }
  await authRecord(formData.value);
  getStatus();
  uni.showToast({
    title: "上传成功",
  });
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 120rpx;
  .title {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1e1e1e;
    line-height: 44rpx;
    margin-bottom: 40rpx;
  }
  .scBox {
    background: #f7f7f7;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    margin-bottom: 20rpx;
    .left {
      .s {
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #1e1e1e;
        line-height: 44rpx;
      }
      .x {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #a8a8a8;
        line-height: 34rpx;
        margin-top: 8rpx;
      }
    }
    .img {
      width: 296rpx;
      height: 240rpx;
    }
  }
  .bz {
    font-size: 28rpx;
    color: #666669;
    line-height: 48rpx;
  }
}
</style>
